<template>
  <div class="f_div">
    <div class="t_div">设置 / <a href="#">部门管理</a></div>
    <el-container>
      <el-header class="header"
        ><div class="h_div">
          <div class="h_in_vid">
            <el-button type="primary" style="width: 80px" @click="add"
              >新增</el-button
            >
          </div>
        </div></el-header
      >
      <el-header class="header2"
        ><div class="h_div">
          <el-row :gutter="2">
            <el-col :span="6">
              <el-form
                :model="form"
                label-width="auto"
                style="max-width: 1000px"
              >
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="value2"
                    type="datetimerange"
                    start-placeholder="请选择日期"
                    end-placeholder="请选择日期"
                    format="YYYY-MM-DD"
                    date-format="YYYY/MM/DD"
                    unlink-panels
                  >
                    <template #prev-month>
                      <el-icon><CaretLeft /></el-icon>
                    </template>
                    <template #next-month>
                      <el-icon><CaretRight /></el-icon>
                    </template>
                    <template #prev-year>
                      <el-icon>
                        <svg
                          viewBox="0 0 20 20"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g stroke-width="1" fill-rule="evenodd">
                            <g fill="currentColor">
                              <path
                                d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z"
                              />
                            </g>
                          </g>
                        </svg>
                      </el-icon>
                    </template>
                    <template #next-year>
                      <el-icon>
                        <svg
                          viewBox="0 0 20 20"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                        >
                          <g stroke-width="1" fill-rule="evenodd">
                            <g fill="currentColor">
                              <path
                                d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z"
                              />
                            </g>
                          </g>
                        </svg>
                      </el-icon>
                    </template>
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="4"
              ><el-input
                style="width: 200px; margin-left: 16px; margin-right: 16px"
                v-model="value"
                placeholder="请输入部门名称搜索"
              ></el-input
            ></el-col>
            <el-col :span="3"
              ><el-button type="primary" style="width: 80px" @click="search"
                >搜索</el-button
              >
              <el-button style="width: 80px" @click="reset"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </div>
      </el-header>
      <el-main class="main">
        <el-table
          height="442px"
          :data="tableData"
          style="width: 100%"
          row-key="depart_id"
          default-expand-all
          stripe
          :header-cell-style="{
            background: '#F7F7F7',
            color: '#999',
            textAlign: 'center',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            prop="depart_name"
            label="部门名称"
            width="220"
          ></el-table-column>
          <el-table-column prop="depart_status" label="部门状态" width="100">
            <template #default="scoped">
              <el-button
                link
                type="success"
                v-if="scoped.row.depart_status == 0"
              >
                启用
              </el-button>
              <el-button link type="danger" v-else-if="scoped.row.depart_status == 1">
                禁用
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="150">
          </el-table-column>
          <el-table-column
            prop="create_by"
            label="创建人"
            width="150"
          ></el-table-column>
          <el-table-column
            prop="depart_remark"
            label="备注"
            width="240"
          ></el-table-column>
          <el-table-column label="操作">
            <template #default="scoped">
              <el-button 
                link
                type="primary"
                @click="edit(scoped.row)"
              >
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                @click="remove(scoped.row.depart_id)"
                v-if="scoped.row.depart_id != 0"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import $http from "@/axios/base";
export default {
  name: "app",
  setup() {
    let value2 = ref(""); //条件：创建日期
    let value = ref(""); //条件：部门名称
    let tableData = ref([]);
    let router = useRouter();

    let name = ref();

    //添加
    function add() {
      router.push({
        path: "/DepartEdit",
        query: { name: "新增部门", id: 0 },
      });
    }

    //展示
    function show() {
      if (value2.value != "") {
        var time1 = new Date(value2.value[0])
          .toISOString()
          .slice(0, 10)
          .toString();
        var time2 = new Date(value2.value[1])
          .toISOString()
          .slice(0, 10)
          .toString();
      }
      $http
        .get(`http://localhost:5261/api/Depart/GetDepart`, {
          params: {
            date1: time1,
            date2: time2,
            value2: value.value,
          },
        })
        .then((res) => {
          tableData.value = res;
          getType(tableData.value);
          console.log(tableData.value);
        })
        .catch((err) => console.log(err));
    }

    const getType = (value) => {
      const list = value;
      if (list == null) return;
      list.forEach((item) => {
        item.create_time = new Date(item.create_time)
          .toISOString()
          .slice(0, 10);
        getType(item.children);
      });
    };

    //转日期yyyy-MM-dd
    function formatDate(date) {
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，所以要加1
      let day = date.getDate().toString().padStart(2, "0");
      return `${year}-${month}-${day}`;
    }

    //重置
    function reset() {
      value.value = "";
      value2.value = "";
    }

    //搜索
    function search() {
      show();
    }

    //编辑
    function edit(row) {
      console.log(row);
      if (row.depart_pid == 0 && row.depart_id == 0) {
        router.push({
          path: "Company"
        });
      } else {
        router.push({
          path: "DepartEdit",
          query: { id: row.depart_id, name: "编辑部门" },
        });
      }
    }

    //删除
    function remove(id) {
      ElMessageBox.confirm("确认是否删除？", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        draggable: true,
        overflow: true,
        lockScroll: false, //防止抖动
      })
        .then(() => {
          $http
            .delete(`http://localhost:5261/api/Depart/DelDepart/${id}`)
            .then((res) => {
              show();
              ElMessage.success("删除成功");
            })
            .catch((err) => console.log(err));
        })
        .catch(() => {
          ElMessage.info("取消操作");
        });
    }

    onMounted(() => {
      show();
    });

    return {
      name,
      value,
      value2,
      tableData,
      router,
      getType,
      add,
      edit,
      reset,
      remove,
      search,
      formatDate,
    };
  },
};
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: right;
  margin-top: 20px;
}
.t_div {
  margin-bottom: 20px;
  text-align: left;
  font-size: 14px;
  color: #b3b4b6;
}
a {
  text-decoration: none;
}
.f_div {
  padding: 0px 50px;
}
.h_div {
  height: 39px;
  margin-top: 15px;
}
.h_in_vid {
  width: 800px;
  height: 20px;
  margin-top: 20px;
  display: flex;
}
.header {
  background-color: #ffffff;
  border-radius: 10px 10px 0px 0px;
}
.header2 {
  background-color: #ffffff;
}
.main {
  background-color: #ffffff;
  border-radius: 0px 0px 10px 10px;
  height: 650px;
}
</style>